import type { TSpan } from '../interface';
const CONFIG_SPAN_BREAKPOINTS = [
  { pointType: 'xs', pointWidth: 513, colSpan: 12 }, // 手机, colSpan:格栅每一列占位格数
  { pointType: 'sm', pointWidth: 768, colSpan: 8 }, //平板
  { pointType: 'md', pointWidth: 992, colSpan: 6 }, //桌面显示器
  { pointType: 'lg', pointWidth: 1200, colSpan: 6 }, //大桌面显示器
  { pointType: 'xl', pointWidth: 1600, colSpan: 4 }, //大桌面显示器
  { pointType: 'xxl', pointWidth: 1920, colSpan: 4 }, //2k屏
  { pointType: 'xxxl', pointWidth: 50000, colSpan: 4 }, //4k屏 50000: 这里表示 无穷大(Infinity)
];

export function getSpanConfig(
  layout: string,
  width: number,
  span?: number | TSpan,
): { span: number; layout: string } {
  if (span && typeof span === 'number') {
    return {
      span,
      layout,
    };
  }

  //antd 格栅布局 span:{xs:{span:4},sm:{span:5}...}
  // 这里span属性 span:{xs:12,sm:8,...}

  const spanConfigArrays: {
    pointType: string;
    pointWidth: number;
    colSpan: number;
  }[] = span
    ? ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((key) => {
        const currTypeDetail = CONFIG_SPAN_BREAKPOINTS.find(
          (item) => item.pointType === key,
        );
        return {
          pointType: key,
          pointWidth: currTypeDetail!.pointWidth,
          colSpan: (span as any)[key] || currTypeDetail!.colSpan,
        };
      })
    : CONFIG_SPAN_BREAKPOINTS;
  const spanConfig = spanConfigArrays.find(
    (arrayItem) => width < arrayItem.pointWidth,
  );
  return {
    span: spanConfig!.colSpan,
    layout,
  };
}
